<template>
    <div class="container">
        <div class="user-top">
            <img src="../assets/logo.png" />
        </div>

        <div class="user-main">
            <div class="user-info-box">
                <div class="user-header">
                    <van-image
                        round
                        fit="cover"
                        :src="userInfo.heard_img"
                    />
                </div>
                <div class="user-name van-ellipsis">{{userInfo.nickname}}</div>
                <div class="user-id">ID: {{userInfo.user_id}}</div>
                <div
                    class="user-level"
                    v-if="userInfo.integral_rank"
                >等级：{{userInfo.integral_rank.rank_name}}</div>
            </div>

            <div
                class="play-game-btn"
                @click="showPlayGameDialog"
            >点击开启对战</div>

            <van-swipe
                class="swiper-box"
                :autoplay="3000"
                indicator-color="white"
            >
                <van-swipe-item
                    v-for="(item, index) in swiperList"
                    :key="index"
                >
                    <img
                        class="swiper-img"
                        v-lazy="item.img"
                    />
                </van-swipe-item>
            </van-swipe>

            <div class="user-detail-box">
                <div class="user-detail-top">历史战绩</div>
                <div class="uesr-detail-main">
                    <div class="uesr-detail">
                        <div class="user-gains-item">对战局数：<span v-if="userInfo.game">{{userInfo.game.all}}</span></div>
                        <div class="user-gains-item">获胜比例：<span v-if="userInfo.game">{{userInfo.game.can_win}}</span></div>
                        <div class="user-gains-item">累计得分：<span>{{userInfo.all_game_score}}</span></div>
                        <div class="user-gains-item">目前排名：<span v-if="userInfo.score_order">{{userInfo.score_order.rownum}}</span></div>
                    </div>
                </div>
                <div
                    class="user-detail-bottom"
                    @click="showShare"
                ><span>点击分享赚积分</span></div>
            </div>

            <div class="user-detail-box">
                <div class="user-detail-top">充值积分</div>
                <div class="uesr-detail-main">
                    <div class="uesr-detail">
                        <div class="user-invest-item">目前积分：<span v-if="userInfo.integral_order">{{userInfo.integral_order.integral}}</span></div>
                        <div class="user-invest-item">积分排名：<span v-if="userInfo.integral_order">{{userInfo.integral_order.rownum}}</span></div>
                    </div>
                </div>
                <div
                    class="user-detail-bottom"
                    @click="goRecharge"
                ><span>点击充值享优惠</span></div>
            </div>

            <div class="user-detail-box">
                <div class="user-detail-top">战况回放</div>
                <div class="uesr-detail-main">
                    <div class="uesr-detail">
                        <div
                            class="user-video-item"
                            v-for="(item,index) in userInfo.user_video"
                            :key='index'
                            @click="goVideoDetail(item.game_id)"
                        >
                            <!-- <van-image
                                class="video-poster"
                                fit="cover"
                                :src="posterDefault"
                            /> -->
                            <video
                                class="video-player"
                                :src="item.video"
                            />
                            <div class="video-time van-ellipsis">{{item.video_name}}</div>
                        </div>
                    </div>
                </div>
                <div
                    class="user-detail-bottom"
                    @click="goVideoDetail(userInfo.user_video[0].game_id)"
                ><span>点击视频看详情</span></div>
            </div>

            <div class="rank-box">
                <div class="rank-box-title">全国排行榜</div>
                <img
                    class="rank-tips-icon"
                    src="../assets/question.png"
                    @click="rankTips"
                />
                <div class="rank-nav-box">
                    <div
                        class="rank-nav"
                        :class="rankType==0?'active':''"
                        @click="rankNavClick(0)"
                    >得分</div>
                    <div
                        class="rank-nav"
                        :class="rankType==1?'active':''"
                        @click="rankNavClick(1)"
                    >积分</div>
                </div>
                <div class="rank-list-box">
                    <div class="rank-list-top">
                        <div class="rank-list-top-item-1">排名</div>
                        <div class="rank-list-top-item-2">玩家信息</div>
                        <div class="rank-list-top-item-3">{{rankType==0?'得分':'积分'}}</div>
                    </div>
                    <div class="rank-list-main">
                        <van-list
                            v-model="loading"
                            :finished="finished"
                            finished-text="没有更多了"
                            @load="onLoad"
                        >
                            <div
                                class="rank-list-main-item"
                                v-for="(item,index) in rankList"
                                :key="index"
                            >
                                <div class="rank-list-main-item-1">
                                    <img
                                        src="../assets/rank-1.png"
                                        v-if="index == 0"
                                    />
                                    <img
                                        src="../assets/rank-2.png"
                                        v-if="index == 1"
                                    />
                                    <img
                                        src="../assets/rank-3.png"
                                        v-if="index == 2"
                                    />
                                    {{index>2?index*1+1:''}}
                                </div>
                                <div class="rank-list-main-item-2 van-ellipsis">
                                    <img :src="item.user_list.heard_img" />
                                    {{item.user_list.nickname}}
                                </div>
                                <div class="rank-list-main-item-3">{{rankType == 0?item.user_score:item.integral}}</div>
                            </div>
                        </van-list>
                    </div>
                    <div class="rank-list-tips">上滑看更多</div>
                </div>
            </div>
        </div>

        <van-dialog
            v-model="playGameDialog"
            title="请输入开启对战次数"
            show-cancel-button
            @confirm="confirmPlay"
        >
            <van-stepper
                class="play-num-input"
                v-model="playNum"
                integer
            />
            <div class="play-tips">说明：1次为1人/局，如需为多人开局，请选择对应次数</div>
        </van-dialog>

        <van-overlay
            :show="shareShow"
            @click="shareShow = false"
        >
            <div
                class="share-main"
                ref="shareMain"
                @click.stop
            >
                <slot>
                    <div class="share-user-info">
                        <div class="share-user-header">
                            <van-image
                                round
                                fit="cover"
                                :src="userInfo.heard_img"
                            />
                        </div>
                        <div class="share-user-name van-ellipsis">{{userInfo.nickname}}</div>
                        <div
                            class="share-user-level"
                            v-if="userInfo.integral_rank"
                        >等级：{{userInfo.integral_rank.rank_name}}</div>
                        <div
                            class="share-user-result result-1"
                            v-if="userInfo.game"
                        >玩家胜率：{{userInfo.game.can_win}}</div>
                        <div
                            class="share-user-result result-2"
                            v-if="userInfo.game"
                        >总场次：{{userInfo.game.all}}</div>
                        <div
                            class="share-user-result result-1"
                            v-if="userInfo.score_order"
                        >总排名：{{userInfo.score_order.rownum}}</div>
                        <div
                            class="share-user-result result-2"
                            v-if="userInfo.integral_order"
                        >总积分：{{userInfo.integral_order.integral}}</div>
                        <img
                            class="share-ewm-img"
                            :src="userCode"
                        />
                    </div>
                </slot>
            </div>
            <div
                class="share-img"
                @click.stop
            ></div>
            <div class="share-tips">长按图片发送给好友</div>
        </van-overlay>
    </div>
</template>

<script>
export default {
    data () {
        return {
            userInfo: {},
            userCode: '',
            posterDefault: require('../assets/video-poster-default.png'),
            playerOptions: [],
            rankType: 0,
            rankList: [],
            nowPage: 0,
            loading: false,
            finished: false,
            playGameDialog: false,
            playNum: 1,
            shareShow: false,
            swiperList: [
                {
                    img: require('@/assets/swiper-img-1.gif'),
                    url: ''
                },
                {
                    img: require('@/assets/swiper-img-2.gif'),
                    url: ''
                }
            ]
        }
    },
    created () {
        if (this.$getUrlKey('id') || this.$getUrlKey('pc')) {
            window.sessionStorage.setItem('id', this.$getUrlKey('id'))
            window.sessionStorage.setItem('pc', this.$getUrlKey('pc'))
            this.$request({
                url: '/api/user/set_belong_refer',
                method: 'post',
                params: {
                    id: this.$getUrlKey('id'),
                    pc: this.$getUrlKey('pc')
                }
            }).then(res => { })
        }
    },
    activated () {
        this.getUserInfo()
    },
    methods: {
        getUserInfo () {
            this.$request({
                url: '/api/user/user_info',
                method: 'post',
                params: {}
            }).then(res => {
                this.userInfo = res
                this.getUserCode()
            })
        },
        getUserCode () {
            this.$request({
                url: '/api/Gzhqrcode/qrcode',
                method: 'post',
                params: {
                    id: this.userInfo.user_id
                }
            }).then(res => {
                this.userCode = res
            })
        },
        getRankList () {
            let data
            if (this.rankType == 0) {
                data = {
                    user_score: 1,
                    page: this.nowPage,
                    limit: 10
                }
            }
            else {
                data = {
                    integral: 1,
                    page: this.nowPage,
                    limit: 10
                }
            }
            this.$request({
                url: '/api/Ranking/score_Ranking',
                method: 'post',
                params: data
            }).then(res => {
                this.loading = false
                this.nowPage = this.nowPage + 1
                this.rankList = this.rankList.concat(res)
            }).catch(res => {
                this.finished = true
            })
        },
        onLoad () {
            this.getRankList()
        },
        showPlayGameDialog () {
            this.playGameDialog = true
        },
        showShare () {
            const that = this
            this.$toast.loading({
                message: '图片生成中...',
                forbidClick: true,
                duration: 0
            })
            this.shareShow = true
            window.scrollTo(0, 0)
            setTimeout(() => {
                that.$html2canvas(that.$refs.shareMain, {
                    useCORS: true, //（图片跨域相关）
                    allowTaint: false, //允许跨域（图片跨域相关）
                    taintTest: true, //是否在渲染前测试图片
                }).then(canvas => {
                    let dataURL = canvas.toDataURL('image/png')
                    document.querySelector('.share-img').innerHTML =
                        '<img width="100%" src="' + dataURL + '" />'
                    setTimeout(() => {
                        that.$toast.clear()
                    }, 1000)
                })
            }, 2000)
        },
        rankTips () {
            this.$dialog.alert({
                title: '说明',
                message: '得分：《元力崛起》玩家每次参与对战时获得的比赛得分，每局对战，获胜方可获得对应得分，失败方则不得分。得分排行榜所显示的得分，为玩家累计获得的得分总数。\n\n积分：玩家在《元力崛起》中充值月卡、年卡或购买对战次数，每支付1元，对应获得1个积分。积分排行榜显示的积分，为玩家累计获得的积分总数。',
                messageAlign: 'left'
            }).then(() => {
                // on close
            })
        },
        goRecharge () {
            this.$router.push('/recharge')
        },
        rankNavClick (index) {
            if (this.rankType == index) {
                return
            }
            this.rankType = index
            this.rankList = []
            this.nowPage = 0
            this.finished = false
            this.getRankList()
        },
        confirmPlay () {
            this.$request({
                url: '/api/Coin/use_coin',
                method: 'post',
                params: {
                    num: this.playNum
                }
            }).then(res => {
                this.$toast('开启对战成功')
            }).catch(res => {
                this.$toast(res)
                this.$router.push('/recharge')
            })
        },
        goVideoDetail (id) {
            this.$router.push({
                path: '/gameDetail',
                query: {
                    game_id: id
                }
            })
        }
    }
}
</script>

<style lang="less" scoped>
.container {
    min-height: 100%;
    background-color: #2f318a;
}

.user-top {
    height: 345px;
    padding-top: 80px;
    background-color: #e11d27;
    text-align: center;
    img {
        width: 294px;
    }
}

.user-main {
    padding: 0 26px;
    transform: translate(0, -126px);
}

.user-info-box {
    position: relative;
    height: 277px;
    text-align: center;
    background-color: #fff;
    border-radius: 20px;
}

.user-header {
    position: absolute;
    top: 0;
    left: 50%;
    width: 158px;
    height: 158px;
    background: #fff;
    padding: 6px;
    box-sizing: border-box;
    border-radius: 50%;
    transform: translate(-50%, -40%);
    .van-image {
        width: 100%;
        height: 100%;
    }
}

.user-name {
    position: absolute;
    top: 104px;
    left: 0;
    right: 0;
    padding: 0 50px;
    font-weight: bold;
    font-size: 44px;
    color: #393939;
}

.user-id {
    position: absolute;
    top: 170px;
    left: 0;
    right: 0;
    font-weight: 500;
    font-size: 32px;
    color: #959595;
}

.user-level {
    position: absolute;
    top: 220px;
    left: 0;
    right: 0;
    font-weight: 500;
    font-size: 32px;
    color: #959595;
}

.user-detail-box {
    margin-top: 22px;
    border-radius: 20px;
    background-color: #fff;
    overflow: hidden;
}

.user-detail-top {
    height: 88px;
    line-height: 88px;
    text-align: center;
    font-weight: bold;
    font-size: 32px;
    color: #fff;
    background-image: url("../assets/user-detail-top-bg.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.uesr-detail-main {
    padding: 34px 0;
}

.uesr-detail {
    display: flex;
    flex-wrap: wrap;
}

.user-gains-item {
    width: 50%;
    text-align: center;
    font-weight: 500;
    font-size: 28px;
    color: #222;
    margin-bottom: 20px;
    span {
        font-size: 28px;
        color: #959595;
    }
}

.user-invest-item {
    width: 100%;
    text-align: center;
    font-weight: 500;
    font-size: 28px;
    color: #222;
    margin-bottom: 20px;
    span {
        font-size: 28px;
        color: #959595;
    }
}

.user-video-item {
    width: 50%;
    text-align: center;
    .video-time {
        font-weight: 500;
        font-size: 28px;
        color: #222;
        margin-top: 12px;
    }
    .video-poster {
        width: 222px;
        height: 126px;
    }
    .video-player {
        width: 222px;
        height: 126px;
    }
}

.user-invest-item:nth-child(2) {
    margin: 0;
}

.user-gains-item:nth-child(3),
.user-gains-item:nth-child(4) {
    margin: 0;
}

.user-detail-bottom {
    height: 70px;
    line-height: 70px;
    text-align: center;
    background-color: #e6575e;
    span {
        font-weight: bold;
        font-size: 28px;
        color: #fff;
        text-shadow: 1px 1px 1px #000;
    }
}

.play-game-btn {
    height: 120px;
    line-height: 120px;
    text-align: center;
    background-color: #e41f2a;
    border: 5px solid #fff;
    border-radius: 20px;
    font-weight: 600;
    font-size: 44px;
    color: #fff;
    margin-top: 20px;
}

.rank-box {
    position: relative;
    margin-top: 20px;
    padding: 0 20px;
    background-color: #c9753d;
    border-radius: 20px;
}

.rank-box-title {
    line-height: 114px;
    text-align: center;
    font-weight: 600;
    font-size: 48px;
    color: #fff;
}

.rank-tips-icon {
    position: absolute;
    top: 36px;
    right: 18px;
    width: 39px;
    height: 39px;
}

.rank-nav-box {
    display: flex;
    justify-content: space-between;
    .active {
        border-color: #fff;
        color: #fff;
        background-color: #e6a157;
    }
}

.rank-nav {
    width: 316px;
    height: 58px;
    line-height: 54px;
    text-align: center;
    background-color: #626262;
    border: 2px solid #626262;
    border-radius: 8px;
    font-weight: 600;
    font-size: 30px;
    color: #aaabab;
    box-sizing: border-box;
}

.rank-list-box {
    margin-top: 26px;
    border-radius: 15px;
    overflow: hidden;
}

.rank-list-top {
    display: flex;
    align-items: center;
    height: 52px;
    background-color: #f58335;
}

.rank-list-top-item-1 {
    width: 106px;
    text-align: center;
    font-weight: 600;
    font-size: 30px;
    color: #fff;
}

.rank-list-top-item-2 {
    flex: 1;
    text-align: center;
    font-weight: 600;
    font-size: 30px;
    color: #fff;
}

.rank-list-top-item-3 {
    width: 200px;
    text-align: center;
    font-weight: 600;
    font-size: 30px;
    color: #fff;
}

.rank-list-main {
    height: 700px;
    overflow-y: scroll;
    box-sizing: border-box;
    background-color: #fff;
}

.rank-list-main-item {
    display: flex;
    align-items: center;
    height: 70px;
}

.rank-list-main-item:nth-child(2n-1) {
    background-color: #fff3d4;
}

.rank-list-main-item:nth-child(2n) {
    background-color: #fff;
}

.rank-list-main-item-1 {
    width: 106px;
    text-align: center;
    font-weight: 600;
    font-size: 39px;
    color: #000;
    img {
        width: 54px;
        height: 51px;
        vertical-align: bottom;
    }
}

.rank-list-main-item-2 {
    display: flex;
    flex: 1;
    align-items: center;
    font-weight: 500;
    font-size: 24px;
    color: #000;
    padding: 0 40px;
    img {
        width: 56px;
        height: 56px;
        border-radius: 50%;
        margin-right: 10px;
    }
}

.rank-list-main-item-3 {
    width: 200px;
    text-align: center;
    font-weight: 500;
    font-size: 24px;
    color: #000;
}

.rank-list-tips {
    line-height: 66px;
    text-align: center;
    font-weight: 500;
    font-size: 28px;
    color: #fff;
}

.share-main {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.5);
    width: 1080px;
    height: 1920px;
    background-image: url("../assets/share-img.jpg");
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.share-tips {
    position: absolute;
    bottom: 5%;
    left: 0;
    right: 0;
    text-align: center;
    font-weight: 500;
    font-size: 30px;
    color: #fff;
}

.share-user-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 120px;
}

.share-user-header {
    width: 186px;
    height: 186px;
    background: #fff;
    padding: 12px;
    box-sizing: border-box;
    border-radius: 50%;
    .van-image {
        width: 100%;
        height: 100%;
    }
}

.share-user-name {
    font-weight: bold;
    font-size: 60px;
    color: #fff;
    margin-top: 20px;
}

.share-user-level {
    font-weight: 500;
    font-size: 50px;
    color: #fff;
    margin-top: 10px;
    margin-bottom: 50px;
}

.share-user-result {
    width: 378px;
    height: 70px;
    line-height: 70px;
    text-align: center;
    font-weight: 500;
    font-size: 28px;
    color: #fff;
    margin-bottom: 24px;
}

.result-1 {
    background-color: #aa0103;
}

.result-2 {
    background-color: #434343;
}

.share-ewm-img {
    position: absolute;
    bottom: 67px;
    right: 74px;
    width: 160px;
    height: 160px;
}

.share-img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.5);
    width: 1080px;
    height: 1920px;
    img {
        width: 100%;
        height: 100;
    }
}

.play-tips {
    padding: 0 50px;
    font-size: 26px;
    color: #aa0103;
    text-align: center;
}

.play-num-input {
    margin: 20px 0;
    text-align: center;
}

.swiper-box {
    width: 100%;
    margin-top: 20px;
}

.swiper-img {
    width: 100%;
}
</style>
